<!--
 * @Descripttion:
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Link: 1074699502@qq.com
 * @Contact: QQ:1074699502
 * @LastEditors: 梧桐
 * @LastEditTime: 2020-12-07 04:14:52
 专注于直播电商产品研发与定制
-->
<template>
	<div class="headWrap" :style="{backgroundColor:isScrollTop?'#fa3f3f':''}">
		<div class="headerWrapTop ">
			<slot></slot>
			<image :src="imgStaticUrl+'/images/logo.png'" class="iconLeft" v-if="false"></image>
			<view :class="isScrollTop?'scrollTop':''" class="inputWrap"
				@click="getnav('/pagesC/search/searchAll?search_id=1')">
				<u-icon name="search" color="#888" size="30"></u-icon>
				<p class="searchtips">请输入商品关键词</p>
			</view>
		</div>

		<div v-show="!isScrollTop" class="specialWrap" v-if="false">
			<u-icon class="headIcon" name="checkbox-mark" color="#ffc7c7" size="24" label="精选好货" label-color="#ffc7c7"
				label-size="28"></u-icon>
			<u-icon class="headIcon" name="checkbox-mark" color="#ffc7c7" size="24" label="天天低价" label-color="#ffc7c7"
				label-size="28"></u-icon>
			<u-icon class="headIcon" name="checkbox-mark" color="#ffc7c7" size="24" label="多商户入驻" label-color="#ffc7c7"
				label-size="28"></u-icon>
			<u-icon class="headIcon" name="checkbox-mark" color="#ffc7c7" size="24" label="极速物流" label-color="#ffc7c7"
				label-size="28"></u-icon>
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				imgStaticUrl: '',
				getcountry: {}
			}
		},
		props: {
			isBgWhite: {
				type: Boolean,
				default: true
			},
			isScrollTop: {
				type: Boolean,
				default: false
			},
		},

		mounted() {
			this.imgStaticUrl = this.STATICURL;  // 线上图片地址（兼容微信小程序写法）
			this.getcountry = uni.getStorageSync('geography')
			uni.$on('changeCurrency', res => {
				this.getcountry = res
			})
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/mixins.scss';

	/*
@font-face{
  font-family: 'BarlowCondensed';
  src: url('/static/fonts/BarlowCondensed-Medium.otf');
}
*/
	.headWrap {
		padding: var(--status-bar-height) 30upx 10upx 30upx;

		position: fixed;
		z-index: 99;
		width: 95%;
		left: 50%;
		/*  #ifdef  MP-WEIXIN  */
		padding: 0 30upx;
		width: 100%;
		padding-top: 80upx;
		/*  #endif  */
		.headerWrapTop {
			display: flex;
			justify-content: space-between;
			margin-bottom: 5upx;
			padding: 10upx;
			font-weight: bold;
		}

		.specialWrap {
			@extend .headerWrapTop;
			padding: 20upx;
			margin-right: 15upx;
		}

		transform: translateX(-50%);
		transition: all .6s;

		.title {
			color: #fff;
			font-size: 38upx;
			font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

			.info {
				font-size: 24upx;
				font-weight: lighter !important;
				color: rgba(255, 255, 255, 0.7);

			}
		}

		.iconLeft {
			width: 74upx;
			height: 74upx;
			border-radius: 100px;
			margin-right: 20upx;
			border: 2upx solid #fa3f3f;
			animation: flip 4s ease-in-out 0.3s infinite;
		}

		@keyframes flip {
			0% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(10upx);
			}

			100% {
				transform: translateY(0);
			}
		}

		.inputWrap {
			@include flexbox($jc:flex-start);
			background: #f5f5f5;
			border-radius: 100px;
			flex: 1;
			height: 68upx;
			text-align: left;
			padding-left: 30upx;
			position: relative;
			width: 100%;
			box-sizing: border-box;
			transition: all 0.6s;

			.searchBtn {
				background-image: linear-gradient(to right, #ffa468, #fa3f3f);
				padding: 0 30upx;
				align-self: flex-end;
				border-radius: 200px;
				color: #fff;
				position: absolute;
				right: -2upx;
				height: 68upx;
				line-height: 68upx;
				font-weight: 600;
			}

			.icon-search1 {
				width: 32upx;
				height: 32upx;
				background-image: url('/static/images/icon-search.png');
				background-size: cover;
				overflow: hidden;
				display: inline-block
			}

			.searchtips {
				color: #999;
				margin-left: 14upx;
			}
		}
	}

	.headIcon {
		/deep/ .u-icon__icon {
			border: 2upx solid #ffc7c7;
			border-radius: 100px;
			padding: 2upx;
		}

	}

	.u-m-l-15 {
		margin-left: 15upx;
	}

	.scrollTop {
		margin-top: -80upx;
		width: 85% !important;
		transition: all 0.6s;
		/* #ifndef APP-PLUS */
		margin-top: -74upx;
		/* #endif   */
	}
</style>
